<template>
    <el-table :data="tableData" style="width: 100%;height: 100%" border stripe class="custom-table">
        <el-table-column fixed prop="id" label="编号" width="150" />
        <el-table-column prop="menuName" label="菜单名称" width="120" />
        <el-table-column prop="url" label="菜单Url" width="150" />
        <el-table-column prop="userName" label="创建人名称" width="120" />
        <el-table-column prop="createDate" label="创建时间" width="200">
            <template #default="scope">
                {{ scope.row.createDate.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="updateBy" label="修改人" width="120">
            <template #default="scope">
                {{ scope.row.updateBy == 1? 'admin' : scope.row.updateBy == 2? 'zhangsan' : scope.row.updateBy == 3?
                '' : '' }}
            </template>
        </el-table-column>
        <el-table-column prop="updateDate" label="修改时间" width="120"/>
        <el-table-column fixed="right" label="Operations" min-width="120">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="Fen(scope.row);" class="table-button">
                    修改
                </el-button>
                <el-button link type="danger" size="small" @click="handleDelete(scope.row.id)" class="table-button">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="dialogFormVisible" title="Shipping address" width="500" class="custom-dialog">
        <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" label-width="auto" class="demo-ruleForm"
            status-icon>
            <el-form-item label="父级菜单" prop="pId" class="form-item">
                <el-select v-model="ruleForm.pId" placeholder="请选择菜单">
                    <el-option v-for="item in tableData" :key="item.id" :label="item.menuName" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="菜单名称" prop="menuName" class="form-item">
                <el-input v-model="ruleForm.menuName" />
            </el-form-item>
            <el-form-item label="跳转的Url地址" prop="url" class="form-item">
                <el-input v-model="ruleForm.url" />
            </el-form-item>
            <el-form-item class="form-item">
                <el-button type="primary" @click="update()" class="form-button">
                    修改
                </el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCounterStore } from '@/stores/counter'
import GetMain from './GetMain.vue'
import {read,write} from '@/axios/axiosHelper'

const store = useCounterStore()

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})

const tableData = ref([])

onMounted(() => {
    getMenu()
})

const getMenu = () => {
    read.get('/read/api/Main/GetMenu').then((res) => {
        tableData.value = res.data.data
    })
}

const update = () => {
    console.log(ruleForm)
    write.put("/write/api/Menu/UpdateMenu", ruleForm).then((res) => {
        if (res.data.code == 400) {
            ElMessage.success("修改成功");
            getMenu()
        } else {
            ElMessage.error("修改失败");
        }
    })
}

const ruleForm = <any>reactive({
    id: 1,
    menuName: "",
    url: "",
    pId: 0,
    createBy: store.counterStore.userId,
    createDate: "2025-02-28T08:08:00.354Z",
    updateBy: store.counterStore.userId,
    updateDate: "2025-02-28T08:08:00.354Z"
})
const Fen = (row: any) => {

    ruleForm.pId = row.pId
    ruleForm.menuName = row.menuName
    ruleForm.url = row.url
    ruleForm.id = row.id

    dialogFormVisible.value = true
}

const handleDelete = (id: number) => {
    ElMessageBox.confirm(
        '此操作将永久删除该菜单，是否继续？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        // 调用删除接口
        write.delete("/write/api/Menu/DelMenu",
            {
                params: {
                    id: id
                }
            }
        )
            .then((res) => {
                if (res.data.code == 500) {
                    ElMessage.success("删除成功");
                    getMenu()
                } else {
                    ElMessage.error("删除失败");
                }
            })

    }).catch(() => {
        ElMessage.info('已取消删除')
    })
}
</script>

<style scoped>
.custom-table {
    border-radius: 8px;
    overflow: hidden;
}
.custom-table__header {
    background-color: #f5f7fa;
}
.custom-table__body tr:nth-child(even) {
    background-color: #f9fafc;
}
.table-button {
    margin-right: 8px;
    transition: background-color 0.3s ease;
}
.table-button:hover {
    background-color: #e6f7ff;
}
.custom-dialog {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
.custom-dialog__header {
    background-color: #f5f7fa;
    border-bottom: 1px solid #e4e7ed;
    padding: 16px;
    font-weight: bold;
}
.form-item {
    margin-bottom: 16px;
}
.form-button {
    transition: background-color 0.3s ease;
}
.form-button:hover {
    background-color: #e6f7ff;
}
</style>